<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>QQ空间，分享生活，留住感动</title>
<link rel="short icon" href="favicon.ico">
<style type="text/css">
	/*清除浏览器默认样式*/
    *{
    	padding:0;
        margin:0 auto;
    }
	body{
		background-image:url(bg3.jpg);
		background-size:cover;
		}
	.logo{
		width:251px;
		height:98px;
		background-image:url(qzone-login-logo.32.png);
		background-size:251px 98px;
		float:left;
		margin:0 0 0 320px;
		}
	.login{
		width:419px;
		height:300px;
		background-color:#fff;
		margin:170px 0 0 780px;
		border:2px solid #eee;
		}
	.nav{
		width:100%;
		height:50px;
		border-bottom:2px solid #eee;
		}
	span{
		/*内联块，同时拥有块级标签和行级标签的特性*/
		display:inline-block;
		/*如何垂直居中：行高与高度相等*/
		height:45px;
		line-height:45px;
		margin-left:60px;
		}
	.span2{
		margin-left:110px;
		border-bottom:2px solid black;
		padding-bottom:5px;
		}
	.content{
		width:418px;
		height:200px;
		}
	.content_top{
		width:272px;
		height:50px auto;
		}
	.qqdiv,.pwddiv{
		width:272px;
		height:42px;
		background:url(loninp.png) no-repeat -2px -2px;
		margin-bottom:20px;
		}
	#qq,#pwd{
		background:none repeat scroll 0 center;    /*清除背景，一般用于背景覆盖了上一级的背景图片*/
		border:0 none;     /*清除边框*/
		font-size:14px;
		width:258px;
		height:18px;
		line-height:18px;
		padding:11px 0 11px 10px;
		color:#666;
		}
	.subdiv{
		width:100%;
		height:40px;
		}
	#sub{
		width:115px;
		height:35px;
		line-height:35px;
		color:#fff;
		font-weight:bold;
		font-size:18px;
		background-color:#3f0;
		border:0 none;
		border-radius:4px;
		}
	.content_foot{
		width:410px;
		height:16px;
		text-align:right;
		}
	.content_foot a{
		text-decoration:none;
		color:#666;
		font-size:12px;
		}
	.xian{
		color:#666;
		font-size:10px;
		margin-left:10px;
		}
</style>
</head>

<body>
	<div class="logo" id="logo"></div>
    <div class="login">
    	<div class="nav" >
        	<span>快速登录</span>
            <span class="span2">账号密码登录</span>
        </div>
        <div class="content" style="position:relative;top:35px;">
        	<div class="content_top">
            	<form method="" action="">
                <div class="qqdiv"><input type="text" name="uname" id="qq" placeholder="支持QQ号/邮箱/手机号登陆" /></div>
                <div class="pwddiv"> <input type="password" name="pwd" id="pwd" placeholder="密码" /></div>
                <div class="subdiv"><input type="submit" value="登录" id="sub" /></div>
                </form>
            </div>
            <div class="content_foot" style="position:relative;top:18px;">
            	<a href="">忘了密码</a><span class="xian">|</span>
                <a href="">注册新账号</a><span class="xian">|</span>
                <a href="">意见反馈</a>
            </div>
        </div>
    </div>
    
    
    <script>
    	//1.如何获得一个随机数
    	var i=Math.floor(Math.random()*4+1);
		//2.设置背景图片
		document.body.style.backgroundImage="url('bg"+i+".jpg')";
		if(i==1){
				document.getElementById("logo").style.backgroundImage="url(qzone-login-logo-dark.32.png)";
			}
    </script>
</body>
</html>
